<template>
	<view class="">
		<view class="header">
			<view class="" style="font-size: 14px;">
				可用健康豆
			</view>
			<view class="points">
				{{points}}
			</view>
			<view class="tips">
				消费得健康豆将在确认收货后发放到账户
			</view>
		</view>
		<view class="fg">

		</view>
		<view class="p_con">
			<view class="p_shai">
				<view class="s_date" @click="showDate=true">
					{{pDate}} <u-icon name="arrow-down"></u-icon>
				</view>
				<view class="s_date" @click="showType = true">
					{{pType}} <u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="p_list_box">
				<view class="code_list" v-if="list">
					<view class="code_item" v-for="(item,index) in list" :key="index">
						<view class="code_info">
							<view class="code_name">
								{{item.num}}
							</view>
							<view class="code_num">
								{{item.status_text}}
							</view>
						</view>
						<view class="code_time">
							{{item.create_time}}
						</view>
						
					</view>
				</view>
				<view class="empty" v-else>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无健康豆明细">
					</u-empty>
				</view>
			</view>
		</view>
		<!-- 时间 -->
		<u-datetime-picker ref="datetimePicker" :show="showDate" mode="year-month" @cancel="showDate=false"
			@confirm="getPointsDate" :formatter="formatter"></u-datetime-picker>

		<u-picker :show="showType" @cancel="showType=false" @confirm="getPointsType" :columns="columns"
			keyName="label"></u-picker>
	</view>
</template>

<script>
	import {pointsList} from '@/api/my.js'
	export default {
		data() {
			return {
				points:0,
				pDate: '全部时间',
				pType: '全部',
				showDate: false,
				showType: false,
				pDateVal:'',
				type: 0,
				columns: [
					[{
						label: '全部',
						id: 0
					}, {
						label: '收入',
						id: 1
					}, {
						label: '支出',
						id: 2
					}, {
						label: '冻结',
						id: 2
					}]
				],
				page:1,
				list:[
					{
						num:20,
						status_text:"支出",
						create_time:"2024-12-10 18:55:30"
					}
				],
				more:true
			}
		},
		onLoad(options) {
			this.points = options.val
		},
		mounted() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
			this.getPointsList()
		},
		onReachBottom() {
			console.log(111)
			if(this.more){
				this.page = this.page+1
				this.getPointsList()
			}
		},
		methods: {
			getPointsList(){
				const data = {
					date:this.pDateVal,
					status:this.type,
					page:this.page
				}
				pointsList(data).then(res=>{
					if(res.data.list.length>0){
						if(this.page==1){
							this.list = res.data.list
						}else{
							this.list = this.list.concat(res.data.list)
						}
						
					}else{
						if(this.page==1){
							this.list = res.data.list
						}
						this.more = false
					}
					
				})
			},
			getPointsDate(res) {
			
				const date = res.value
				const year = new Date(date).getFullYear();
				const month = (new Date(date).getMonth() + 1).toString().padStart(2, '0');
				this.pDate = `${year}-${month}`
				this.pDateVal = `${year}-${month}`
				this.showDate = false
				this.page = 1
				this.getPointsList()
			},
			getPointsType(res) {
				console.log(res)
				const id = res.value[0].id
				this.pType = res.value[0].label
				this.type = res.value[0].id
				this.showType = false
				this.page = 1
				this.getPointsList()
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}`
				}
				if (type === 'month') {
					return `${value}`
				}

				return value
			},

		}
	}
</script>

<style lang="scss" >
	page{
		background-color: rgb(247, 247, 247);
	}
	.header {
		text-align: center;
		padding: 10px 0;
		// background-color: #fff;
		.points {
			font-size: 22px;
			font-weight: 700;
			margin: 16px 0;
		}

		.tips {
			font-size: 12px;
			color: #aaa;
		}
	}
	.code_list{
		margin-top: 12px;
		.code_item{
			padding: 12px;
			background-color: #fff;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			font-size: 14px;
			margin-bottom: 10px;
			.code_info{
				display: flex;
				justify-content: space-between;
				margin-bottom: 12px;
				.code_name{
					font-weight: 700;
					font-size: 16px;
				}
			}
			.code_time{
				color: #999;
				font-size: 12px;
			}
		}
	}

	.fg {
		height: 10px;
		background-color: #eee;
	}

	.p_con {
		padding: 12px;

		.p_shai {
			display: flex;

			.s_date {
				display: flex;
				align-items: center;
				margin-right: 10px;
				font-size: 14px;
			}
		}
	}
</style>